import { Popover } from 'antd';
import classNames from 'classnames';
import React from 'react';
import type { DataListItemFieldType } from '@/services/listTable';
import styles from './ViewTableCell.module.less';

interface MemberLabelColorProps {
  code?: string;
  color?: string;
}
interface Props {
  showText?: string | string[];
  colStyle?: React.CSSProperties;
  text?: DataListItemFieldType;
  showMemberLabelColour?: MemberLabelColorProps[];
  align?: string;
  memberLabelStyle?: React.CSSProperties;
}

const formatArray = <T extends number | string | null | undefined>(a: T | T[]) =>
  Array.isArray(a) ? a : a && a !== 0 ? [a] : [];

const Main: React.FC<Props> = ({
  colStyle,
  showText,
  text,
  showMemberLabelColour = [],
  align = 'left',
  memberLabelStyle,
}) => {
  const isMul = Array.isArray(showText);
  let memberLabelStyleArr: React.CSSProperties[] = [];
  if (isMul) {
    const valueArr = formatArray(text?.value);
    memberLabelStyleArr = valueArr.map((valItem) => {
      let itemLabelStyle = {};
      const findLabelColor = showMemberLabelColour.find(
        (it: MemberLabelColorProps) => it.code === valItem,
      );
      if (findLabelColor && findLabelColor.color) {
        itemLabelStyle = {
          padding: '1px 8px',
          borderRadius: 2,
          background: findLabelColor.color as string,
          color: '#ffffff',
          display: 'inline-block',
          overflow: 'hidden',
          lineHeight: '20px',
          textOverflow: 'ellipsis',
          maxWidth: '100%',
          whiteSpace: 'nowrap',
        };
      }
      return itemLabelStyle;
    });
  }
  const content = () => {
    let popOverContent = null;
    if (isMul) {
      const popOverArr: string[] = showText?.slice(1);
      popOverContent = (
        <div
          style={{
            maxWidth: 240,
            wordBreak: 'break-all',
            verticalAlign: 'middle',
            lineHeight: '30px',
          }}
        >
          {popOverArr &&
            popOverArr.map((val, ind) => (
              <span
                key={val}
                style={colStyle || memberLabelStyleArr[ind + 1] || {}}
                className={styles.mr12}
                title={showText[ind + 1] || ''}
              >
                {showText[ind + 1] || ''}
              </span>
            ))}
        </div>
      );
    }
    return popOverContent;
  };
  return (
    <div
      className={classNames(styles.tdCell, {
        [styles.textAlignRight]: align === 'right',
      })}
      title={isMul ? undefined : showText}
    >
      {isMul ? (
        <>
          <span style={colStyle || memberLabelStyleArr[0] || {}} title={showText[0] || ''}>
            {showText[0] || ''}
          </span>
          {showText.length - 1 > 0 ? (
            <Popover arrowPointAtCenter placement="top" content={content}>
              <span style={colStyle} className={styles.moreTag}>
                +{showText.length - 1}
              </span>
            </Popover>
          ) : null}
        </>
      ) : (
        <span style={colStyle || memberLabelStyle}>{showText}</span>
      )}
    </div>
  );
};

export default Main;
